<!-- 不良记录及产品介绍 -->
<!-- 小鸽子 8月20日 -->

<!-- 小瓜子 更新于 2020/09/02 -->
<!-- 微调样式 -->

<!-- 小瓜子 更新于 2020/09/09 -->
<!-- 点击文字也可以展开 -->
<template>
	<view class="product_introd"  @click="pullBox">
		<view class="product_title">
			<text>{{eachMessage.title}}</text>
			<text :class="isShow ? 'button_active' : ''" class="inxupt inxupttubiao33 button_title" ></text>
		</view>
		<view class="product_content" :style="isShow ? 'height:' + pullBoxHeight +'px;' : 'height: 0px;'">
			<text class="message">{{eachMessage.content}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			eachMessage: {
				type: Object,
				default: {},
			}
		},
		data() {
			return {
				isShow: false,
				pullBoxHeight: 0
			}
		},
		methods: {
			pullBox() {
				var query = uni.createSelectorQuery().in(this);
				query.select(".message").fields({
					size: true
				},res => {
					this.pullBoxHeight = res.height + 10
				}).exec()
				this.isShow = !this.isShow
			}
		}
	}
</script>

<style lang="less">
	.product_introd {
		background-color: @g-background;
		.inxupttubiao33 {
			display: inline-block;
			transition: all .5s;
			transform: rotate(180deg);
		}
		.button_active {
			transform: rotate(0deg);
		}
		.product_title {
			position: relative;
			background-color: #FFFFFF;
			height: 75rpx;
			text-align: left;
			line-height: 80rpx;
			font-weight: 800;
			.inxupt{
				font-size: 48rpx;
				margin-right: 14rpx;
			}
			text {
				margin-left: 10rpx;
			}

			.button_title {
				position: absolute;
				top: 0rpx;
				right: 10rpx;
			}
		}

		.product_content {
			overflow: hidden;
			margin-left: 20rpx;
			height: 0rpx;
			line-height: 2em;
			transition: all .5s;
		}
		.pull_active {
			height: 100rpx;
		}

	}
</style>
